<template>
  <div class="account-list">
    <p class="p1">账号列表</p>
    <el-table
    @selection-change="handleSelectionChange"
     ref="tableRef" :data="tableData" style="width: 100%">
      <!-- 多选 -->
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="account" label="账号" width="110">
      </el-table-column>
      <el-table-column prop="userGroup" label="用户组" width="130">
      </el-table-column>
      <el-table-column prop="date" label="创建时间" width="140">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 10px"
            size="mini"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >

          <!-- 气泡确认框 -->
          <el-popconfirm
            @confirm="handleDelete(scope.row)"
            title="这是一段内容确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="nation-box">
      <el-pagination
        background=""
        class="nation"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 按钮 -->
    <div class="pridenger">
      <el-button @click="handleBatchDel" type="danger">批量删除</el-button>
      <el-button @click="cancelChange" type="primary">取消选择</el-button>
    </div>

    <!-- 对话弹出框 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form class="form" :model="formData">
        <el-form-item label="用户名">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="formData.userGroup" placeholder="请选择用户组">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="handleConfirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserListReq,
  editUserReq,
  removeUesrAccountReq,
  allRemoveUesrAccountReq,
} from "@/api/user";
export default {
  data() {
    return {
      tableData: [],
      // 多选数据
      ids: [],
      currentPage: 1,
      // 每页条数
      pageSize: 3,
      total: 0,
      // formData=[],
      // 编辑弹窗显示隐藏
      dialogFormVisible: false,
      formData: {
        id: "",
        account: "",
        userGroup: "",
      },
    };
  },

  methods: {
    // 获取数据函数
    async getData() {
      // 提取数据
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;

      // 发送请求
      let res = await getUserListReq({
        currentPage,
        pageSize,
      });

      // 结构数据
      let { data, total } = res.data;

      // 数据赋值
      this.total = total;
      this.tableData = data; //data当前页码对应的数据
      // if (data.length === 0 && this.currentPage !== 1) {
      //   // this.currentPage--;
      //   this.getData();
      // }
    },

    // 批量删除
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
      console.log(this.ids);
    },

    // 批量删除操作
    handleBatchDel() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 发送请求
          let res = await allRemoveUesrAccountReq({ ids: this.ids });
          // 解构数据
          let { code, msg } = res.data;
          // 判断
          if (code === 0) {
            // 重新拉取数据
            this.getData();
            this.$message.success(msg) 
            }

          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 取消选择
    cancelChange() {
      if (this.ids.length) {
        this.$refs.tableRef.clearSelection();
        this.$message.info("取消成功");
      } else {
        this.$message.info("没有选中");
        console.log(4545454545454);
      }
    },

    // 编辑  回填
    async handleEdit(row) {
      // 1、把弹窗打开
      this.dialogFormVisible = true;
      //  2、数据回填，数据需要拷贝，为了解绑数据
      this.formData = { ...row };
    },
    // 确定编辑
    async handleConfirm() {
      // 发送请求
      let res = await editUserReq(this.formData);
      // 解构数据
      let { code, msg } = res.data;
      // 片段
      if (code === 0) {
        this.dialogFormVisible = false;
        // 重新拉取数据
        this.getData();
      }
    },

    // 删除
    async handleDelete(row) {
      // 获取id
      let { id } = row;
      // 发请求
      let res = await removeUesrAccountReq({ id });
      // console.log(index, row);
      // 解构数据
      let { code, msg } = res.data;
      // 判断
      if (code === 0) {
        // 拉起数据
        this.getData();
      }
    },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },

    // 页码
    handleSizeChange(val) {
      // 1 获取当前每页 条数
      this.pageSize = val;
      // 2 拉去数据
      this.getData();
    },

    handleCurrentChange(val) {
      // 1 获取当前页面 赋值
      this.currentPage = val;
      // 2 发请求
      this.getData();
    },
  },

  // 初始化
  created() {
    this.getData();
    console.log("this.tableData :>> ", this.tableData);
  },
};
</script>

<style lang="scss" scoped>
.p1 {
  width: 100%;
  height: 30px;
  background-color: #fff;
  line-height: 30px;
  margin-bottom: 0px;
  border-bottom: 1px rgb(222, 221, 221) solid;
  font-weight: bold;
  text-indent: 10px;
}

.nation-box {
  // width: 100%;
  height: 140px;
  background-color: #fff;
  margin-top: -14px;
  overflow: hidden;
}

.nation {
  margin-top: 20px;
}
.pridenger {
  margin-top: -70px;
}

.nation,
.pridenger {
  margin-left: 20px;
}

.form {
  // width: 295px;
}
</style>